<template>
  <div class="tobe-shown">
    <div class="expect-movies">
      <div class="expect-title">近期最受期待</div>
      <div class="expect-movies-list">
        <div
          class="movies-list-item"
          v-for="(expectItem, index) in expectList"
          :key="index"
          @click="movieDeatil(expectItem.id)"
        >
          <div class="like-icon">
            <van-icon name="like" color="#ccc" />
          </div>
          <div class="movie-cover">
            <img class="auto-img" :src="expectItem.img" alt="" />
          </div>
          <div class="mask">
            <div class="expect-num">{{ expectItem.wish }}人想看</div>
          </div>
          <div class="movie-name one-text">{{ expectItem.nm }}</div>
          <div class="show-time">{{ expectItem.comingTitle }}</div>
        </div>
      </div>
    </div>

    <div class="movies-list">
      <div
        class="movies-item"
        v-for="(showItem, index) in showList"
        :key="index"
        @click="movieDeatil(showItem.id)"
      >
        <div class="time">{{ showItem.comingTitle }}</div>
        <div class="item">
          <div class="cover">
            <img class="auto-img" :src="showItem.img" alt="" />
          </div>
          <div class="item-box">
            <div class="item-top">
              <div class="name one-text">{{ showItem.nm }}</div>
              <div class="item-tag" v-if="showItem.version ? !0 : 0">
                <img class="auto-img" src="../assets/movie-tag.png" alt="" />
              </div>
            </div>
            <div class="expect-num">
              <span class="expect-active">{{ showItem.wish }}</span>
              人想看
            </div>
            <div class="actors one-text">主演:{{ showItem.star }}</div>
            <div class="show-date">{{ showItem.rt }}上映</div>
          </div>
          <div class="item-right">
            <button class="item-button wish">想看</button>
            <!-- <button class="item-button preshow" v-if="showStateButton">
              预售
            </button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "Tobeshown",
  data() {
    return {
      expectList: [],
      showList: [],
      showStateButton: true,
    };
  },
  computed:{
    ...mapState(['city'])
  },
  created() {
    this.expectListData();
    this.getShowList();
  },
  methods: {
    // 获取近期最受期待列表数据
    expectListData() {
      this.axios({
        methods: "get",
        url: "index/mostExpected",
        query: {
          ci: this.city,
          limit: 10,
          offset: 0,
        },
      })
        .then((result) => {
          // 

          this.expectList = result.data.coming;
          // 

          for (let i = 0; i < this.expectList.length; i++) {
            let time = this.expectList[i].comingTitle;

            this.expectList[i].comingTitle = time.substring(0, 5);
          }
        })
        .catch((err) => {
          
        });
    },

    // 获取待映列表数据
    getShowList() {
      this.axios({
        method: "get",
        url: "/index/comingList",
        query: {
          ci: 20,
          limit: 10,
        },
      })
        .then((result) => {
          // 

          this.showList = result.data.coming;
          // 
        })
        .catch((err) => {
          
        });
    },

    // 点击跳转到影片详情
    movieDeatil(movieId) {
      // 获取点击的影片id
      
      this.$router.push({ name: "MovieDetail", params: { movieId } });
    },
  },
};
</script>

<style lang="less" scoped>
.tobe-shown {
  margin-top: 50px;
  margin-bottom: 50px;
}
.expect-movies {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 12px;

  .expect-title {
    font-size: 16px;
    color: #7b7b7b;
  }
  .expect-movies-list {
    // border: 1px solid #00f;
    margin-top: 14px;
    display: flex;
    overflow-x: auto;
    z-index: 1;

    .movies-list-item {
      // border: 1px solid #000;
      width: 85px;
      margin-right: 12px;
      flex: none;
      position: relative;
      .like-icon {
        width: 28px;
        height: 28px;
        position: absolute;
        left: 0;
        top: 0;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(61, 63, 71, 0.6);
        border-bottom-right-radius: 12px;
      }
      .movie-cover {
        width: 85px;
        height: 115px;
        img {
          height: 115px;
        }
      }
      .mask {
        // border: 1px solid #00f;
        width: 100%;
        height: 35px;
        position: absolute;
        bottom: 57px;
        left: 0;
        background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
      }
      .expect-num {
        position: absolute;
        left: 5px;
        bottom: 3px;
        color: #faaf00;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
      }
      .movie-name {
        font-size: 13px;
        color: #222;
        font-weight: bold;
        margin-top: 8px;
      }
      .show-time {
        margin-bottom: 10px;
        margin-top: 4px;
        font-size: 13px;
        color: #999;
      }
    }
  }
}
.movies-list {
  background-color: #f5f5f5;
  padding-top: 14px;

  .time {
    background-color: #fff;
    padding: 12px 12px 0;
    font-size: 14px;
    color: #333;
  }
  .item {
    // border: 1px solid #000;
    border-bottom: 1px solid #ccc;
    padding: 12px;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    .cover {
      // border: 1px solid #000;
      width: 70px;
    }
    .item-box {
      width: 200px;
      .item-top {
        display: flex;
        align-items: center;
        .name {
          font-size: 17px;
          font-weight: bold;
          color: #333;
        }
        .item-tag {
          width: 43px;
          margin-left: 4px;
        }
      }
      .expect-num {
        margin-top: 8px;
        font-size: 13px;
        color: #666;
        .expect-active {
          font-size: 15px;
          color: #faaf00;
          font-weight: bolder;
        }
      }
      .actors {
        font-size: 13px;
        color: #666;
      }
      .show-date {
        font-size: 13px;
        color: #666;
        margin-top: 5px;
      }
    }
    .item-right {
      .item-button {
        width: 60px;
        height: 30px;
        border-radius: 14px;
        color: #fff;
        font-size: 13px;
      }
      .wish {
        background-color: #faaf00;
      }
      .preshow {
        background-color: #3c9fe6;
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>